<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>获取自定义属性</button>
<button>设置自定义属性</button>
<button>删除自定义属性</button>
<hr/>
<img a="1" b="2" my="lisi" width="300" src="http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280" alt="">
</body>
<script>
    const btns = document.querySelectorAll("button");
    const img = document.querySelector("img");
    btns[0].onclick = function(){
        // getAttribute可以获取自定义属性以及内置的属性,获取到的值都是字符串
        console.log("my",img.getAttribute("my"));// lisi
        console.log("src",img.getAttribute("src"));// lisi
        console.log("a",img.getAttribute("a"));// 1
        console.log("b",img.getAttribute("b"));// 2
    }
    btns[1].onclick = function(){
        // 可以设置属性，也可以增加属性。
        img.setAttribute("xixi","lala");
        img.setAttribute("a",100);
        img.setAttribute("b",200);
        img.setAttribute("src","http://baidu.com");
    }
    btns[2].onclick = function(){
        // 移除属性
        img.removeAttribute("a");
        img.removeAttribute("b");
        img.removeAttribute("my");
        img.removeAttribute("src");
    }
</script>
</html>